<template>
  <div class="app-container">
    <el-card class="box-card">
      <el-form :inline="true" :model="listQuery">
        <el-form-item>
          <el-date-picker
            size="small"
            v-model="listQuery.year"
            type="year"
            placeholder="开始时间"
            format="yyyy"
            value-format="yyyy"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            size="mini"
            icon="el-icon-search"
            @click.native="handleFilter"
            >查询</el-button
          >
        </el-form-item>
      </el-form>
      <el-card shadow="never">
        <div id="container" style="height: 400px; width: 100%"></div>
      </el-card>
    </el-card>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { getPointMonthStats } from "@/api/stats";

export default {
  name: "Dashboard",
  data() {
    return {
      option: {},
      listQuery: {
        year: new Date().getFullYear() + "",
      },
      echarts: null,
    };
  },
  computed: {
    ...mapGetters(["name"]),
  },
  mounted() {
    this.getPointMonStats();
  },
  methods: {
    getPointMonStats() {
      getPointMonthStats(this.listQuery)
        .then((res) => {
          this.option = res;
          this.drawBar();
        })
        .catch((error) => {
          console.log(error);
          this.$message.error("获取数据失败!");
        });
    },
    drawBar() {
      const container = document.getElementById("container");
      if(this.echarts == null || this.echarts == "" || this.echarts == undefined){
        this.echarts = this.$echarts.init(container);
      }

      this.echarts.setOption(this.option);
    },
    // 查询
    handleFilter() {
      this.getPointMonStats();
    },
  },
};
</script>

<style lang="scss" scoped>
</style>
